<template>
  <el-drawer
    title="查看"
    :visible.sync="visible"
    :before-close="handleClose"
    :destroy-on-close="true"
    :wrapperClosable="false"
    :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称">
          <div v-html="form.name"></div>
        </el-form-item>
        <el-form-item label="电话">
          <div v-html="form.tel"></div>
        </el-form-item>
        <el-form-item label="邮箱">
          <div v-html="form.mail"></div>
        </el-form-item>
        <el-form-item label="ip地址">
          <div v-html="form.ip"></div>
        </el-form-item>
        <el-form-item label="内容">
          <div
            style="white-space: normal; word-break: break-all; overflow: hidden"
            v-html="form.content"
          ></div>
        </el-form-item>
        <el-form-item label="回复内容" v-if="this.form.reply">
          <div
            style="white-space: normal; word-break: break-all; overflow: hidden"
            v-html="form.reply"
          ></div>
        </el-form-item>
        <el-form-item>

          <el-button type="danger" v-if="this.flag"  @click="handleDelete">删除回复</el-button>
          <el-button type="primary" @click="handleClose">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { DRAWER_SIZE } from "@/util/constant";
import { getMailboxDetailApi,deleteReplyApi } from "@/api/modules/approve.api";

export default {
  data() {
    return {
      visible: false,
      flag: false,
      id: '',
      form: {
        name: "",
        tel: "",
        mail: "",
        ip: "",
        content: "",
        reply: "",
      },
      drawerSize: DRAWER_SIZE,
    };
  },
  methods: {
    async init(id,flag) {
      this.flag = flag
      const res = await getMailboxDetailApi(id);
      this.form.reply = res.reply?.content
      this.id = res.reply?.id
      this.form.name = res.name;
      this.form.tel = res.tel;
      this.form.mail = res.mail;
      this.form.ip = res.ip;
      this.form.content = res.content;
      this.visible = true;

    },
    handleClose() {
      this.form = {};
      this.visible = false;
    },
    async handleDelete(){
      await deleteReplyApi({id: this.id})
      this.$message({
        message: "成功",
        type: "success",
      });
      this.$emit("getTableData",{});
      this.visible = false;
    }
  },
};
</script>
<style scoped>

</style>
